<script lang="tsx" setup>
import { computed, ref, shallowRef } from 'vue'
import MeasureImg from '@/assets/map/measure.png'
import HoverMeasureImg from '@/assets/map/activemeasure.png'
import DropdownMenuItem from '../basic/DropdownMenuItem.vue'
interface Props {
  ruler: any
  line?: boolean
  actual?: boolean
}
const props = withDefaults(defineProps<Props>(), {
  ruler: null,
  line: true,
  actual: false
})
const hover = ref<boolean>(false)
const commandList = ref<string[]>([])
const currentImg = computed(() => (hover.value || isActive.value ? HoverMeasureImg : MeasureImg))
const LineToolDropdownRef = shallowRef('LineToolDropdownRef')
const ActualToolDropdownRef = shallowRef('ActualToolDropdownRef')
const emits = defineEmits(['actual', 'unactual'])
// 激活和非激活操作映射
const commandActions = new Map<
  string,
  { activate: (ref: any) => void; deactivate: (ref: any) => void }
>([
  [
    'line',
    {
      activate: (ref: any) => {
        ref.value.Active()
        props.ruler.turnOn()
      },
      deactivate: (ref: any) => {
        ref.value.deActive()
        props.ruler.turnOff()
      }
    }
  ],
  [
    'actual',
    {
      activate: (ref: any) => {
        ref.value.Active()
        emits('actual')
      },
      deactivate: (ref: any) => {
        ref.value.deActive()
        emits('unactual')
      }
    }
  ]
])
const commandRef: Record<string, any> = {
  line: LineToolDropdownRef,
  actual: ActualToolDropdownRef
}
const isActive = computed(() => commandList.value.some((comman) => comman.startsWith('un')))
const LineToolDropdown = () => {
  return (
    <DropdownMenuItem
      name="直线测量"
      image={false}
      id="line"
      ref={LineToolDropdownRef}
      onRegister={(id: string) => handleRegister(id)}
    ></DropdownMenuItem>
  )
}
const ActualToolDropdown = () => {
  return (
    <DropdownMenuItem
      name="实际测量"
      image={false}
      id="actual"
      ref={ActualToolDropdownRef}
      onRegister={(id: string) => handleRegister(id)}
    ></DropdownMenuItem>
  )
}
const handleRegister = (id: string) => {
  if (!commandList.value.includes(id)) {
    commandList.value.push(id)
  }
}
const toggleCommandState = (commandKey: string, activate: boolean) => {
  const actions = commandActions.get(commandKey)
  if (!actions) return // 如果未定义操作，直接跳过

  const index = commandList.value.findIndex(
    (item) => item === (activate ? commandKey : 'un' + commandKey)
  )

  if (index === -1) return // 如果未找到命令，直接跳过

  commandList.value[index] = activate ? 'un' + commandKey : commandKey
  activate ? actions.activate(commandRef[commandKey]) : actions.deactivate(commandRef[commandKey])

  console.log(`${activate ? 'Activated' : 'Deactivated'}: ${commandKey}`)
}
// 处理命令激活与非激活逻辑
const handleCommand = (command: string) => {
  if (command.startsWith('un')) {
    // 处理反激活逻辑
    const commandKey = command.slice(2)
    toggleCommandState(commandKey, false)
  } else {
    // 处理激活逻辑，先反激活所有
    commandList.value.forEach((item) => {
      const commandKey = item.startsWith('un') ? item.slice(2) : item
      toggleCommandState(commandKey, false)
    })
    // 激活目标命令
    toggleCommandState(command, true)
  }
}
</script>

<template>
  <el-dropdown
    placement="bottom"
    trigger="click"
    popper-class="measure-tools-menu__popover"
    @command="handleCommand"
  >
    <div
      class="tools-title"
      @mouseover="hover = true"
      @mouseout="hover = false"
      :class="isActive ? 'tools-title__active' : ''"
    >
      <img :src="currentImg" mr-10 />
      <span>测量工具</span>
      <el-icon class="el-icon--right"><ArrowDown /></el-icon>
    </div>
    <template #dropdown>
      <el-dropdown-menu ref="MeasureToolRef">
        <line-tool-dropdown></line-tool-dropdown>
        <actual-tool-dropdown v-if="props.actual"></actual-tool-dropdown>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<style scoped lang="scss">
.tools-title {
  display: flex;
  align-items: center;
  font-size: 16px;
  cursor: pointer;
  &:hover {
    color: var(--xy-primary-color);
  }
}
.tools-title__active {
  color: var(--xy-primary-color);
}
</style>
